<template>
  <div class="bigBox">
    <!-- 搜索 -->
    <div class="search">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="人员搜索: ">
          <el-input v-model="value" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="onSubmit"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容部分 -->
    <div class="content">
      <!-- 新增角色按钮 -->
      <div class="content">
        <el-row style="height: 60px">
          <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click="add"
          >新建</el-button>
        </el-row>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="180" />
        <el-table-column prop="userName" label="人员名称" width="350" />
        <el-table-column prop="regionName" label="归属区域" width="350" />
        <el-table-column prop="role.roleName" label="角色" width="350" />
        <el-table-column prop="mobile" label="练习电话" width="350" />
        <el-table-column width="140" label="操作">
          <template #default="{ row }">
            <el-link
              type="primary"
              :underline="false"
              style="margin-right: 10px"
              @click="modify(row)"
            >修改</el-link>
            <el-link
              type="danger"
              :underline="false"
              @click="del(row)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部 -->
    <div v-if="dataAll.totalCount>10">
      <el-row>
        <el-col
          :span="18"
        >共{{ dataAll.totalCount }}条记录 第 {{ dataAll.pageIndex }}/{{ dataAll.totalPage }} 页
          <div
            class="grid-content bg-purple"
          /></el-col>
        <el-col :span="6">
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-arrow-left"
              :disabled="upShow"
              @click="up"
            >上一页</el-button>
            <el-button
              type="primary"
              :disabled="underShow"
              @click="under"
            >下一页<i

              class="el-icon-arrow-right el-icon--right"
            /></el-button>
          </el-button-group>
          <div
            class="grid-content bg-purple-light"
          /></el-col>
      </el-row>
    </div>
    <add ref="addRef" :visible="visible" @addVisibleFn="addVisibleFn" @publicFn="publicFn" />
  </div>
</template>
<script>
import add from './add.vue'
import { personnelSearch, modifySpApi, addSl, delPersonnel } from '@/api'
export default {
  components: {
    add
  },
  data() {
    return {
      upShow: false, // 上下按钮禁用状态
      underShow: false, // 上下按钮禁用状态
      row: {},
      addVisible: false, // 控制添加的弹出层
      value: '',
      tableData: [], // 表格绑定
      dataAll: {}, // 全部数据
      visible: false, // 添加
      rules: {
        addValue: { required: true, message: '请输入', trigger: 'blur' }
      }
    }
  },
  created() {
    this.publicFn()
  },
  methods: {
    yes() {
      // 增加里的确定
      this.$refs.form.validate(async(valid) => {
        if (!valid) return
        if (this.row.className) {
          // console.log(this.row)
          await modifySpApi(this.row.classId, { className: this.from.addValue })
          this.$message.success('修改成功')
        } else {
          await addSl({ className: this.from.addValue })
          this.$message.success('添加成功')
        }
        this.addVisibleFn()
        this.publicFn()
      })
    },
    addVisibleFn() {
      // 添加弹出层的关闭方法
      this.visible = false
    },
    onSubmit() {
      // 查询按钮
      this.publicFn('', '', this.value)
    },
    modify(row) {
      // 修改
      this.visible = true
      this.$refs.addRef.modifyFn(row)
    },
    add(row) {
      this.row = row
      // 添加
      this.visible = true
    },

    del(row) {
      // 删除
      this.$confirm('真的要删除吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 删除
        await delPersonnel(row.id)
        this.$message.success('删除成功')
        // 删除最后一页最后一条数据时，页数减 1
        if (this.tableData.length === 1 && this.dataAll.pageIndex > 1) {
          this.dataAll.pageIndex--
        }
        this.publicFn()
      }).catch(error => {
        console.log(error)
      })
    },
    // 公共
    async publicFn(pageIndex, pageSize, userName, roleId, isRepair) {
      const { data } = await personnelSearch(pageIndex, pageSize, userName, roleId, isRepair)
      console.log(data)
      this.dataAll = data
      this.tableData = data.currentPageRecords
      if (data.pageIndex <= 1) {
        this.upShow = true
      } else {
        this.upShow = false
      }
      if (data.pageIndex === data.totalPage) {
        this.underShow = true
      } else {
        this.underShow = false
      }
    },
    up() {
      // 上一页
      this.publicFn(+this.dataAll.pageIndex - 1, this.dataAll.pageSize)
    },
    under() {
      // 下一页
      this.publicFn(+this.dataAll.pageIndex + 1, this.dataAll.pageSize, '', '')
    }
  }
}
</script>
  <style lang="scss" scoped>
.bigBox {
  padding: 20px;
  .search {
    background-color: #fff;
    padding: 10px;
    padding-bottom: 0px;
  }
}
.content {
  margin-top: 20px;
  background-color: #fff;
  padding: 5px;
}
.bottom {
  margin-top: 30px;
}
.btn {
  text-align: center;
}
</style>

